<template>
  <div class="dashboard-container">
    <div>订单基本信息</div>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="12">订单编号：2020-3-20</el-col>
      <el-col :span="12">预约码:2324546</el-col>
      <el-col :span="12">预约门店:武汉XXX医院</el-col>
      <el-col :span="12">预约检查时间:234</el-col>
      <el-col :span="12">申请退款时间：5</el-col>
      <el-col :span="12">退款状态：2</el-col>
    </el-row>
    <div>退款信息</div>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="12">体检项目总价:2000</el-col>
      <el-col :span="12">实付金额：2000</el-col>
      <el-col :span="12">优惠卷抵扣金额：230</el-col>
      <el-col :span="12">优惠卷编号：5</el-col>
      <el-col :span="12">应退金额:2000</el-col>
      <el-col :span="12">是否退回优惠卷:是</el-col>
      <el-col :span="12">退款账户：56+5+65+552</el-col>
      <el-col :span="12">账户类型：支付宝</el-col>
      <el-col :span="12">退款渠道：XX门店</el-col>
      <el-col :span="24">退款原因：</el-col>
    </el-row>
    <div>退款状态</div>
    <el-divider></el-divider>
    <div class="state">
      <div>
        <img src="../../../assets/timg.png" alt />
      </div>
      <div>
        <div>张丽丽</div>
        <div>2017-10-01 12:00</div>
      </div>
    </div>
    <el-steps :active="1" align-center>
      <el-step title="申请退单">
        <div slot="description">
          <div>张丽丽</div>
          <div>2017-10-01 12:00</div>
        </div>
      </el-step>
      <el-step title="已审核">
        <div slot="description">
          <div>同意</div>
          <div>张丽丽</div>
          <div>2017-10-01 12:00</div>
        </div>
      </el-step>
      <el-step title="退款中"></el-step>
      <el-step title="已退款"></el-step>
    </el-steps>
    <el-row :gutter="20">
      <el-col :span="24">退款结论:已拒绝</el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">结论说明:退单原因不接受</el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      input: '',
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  },
  methods: {
    onSubmit() {
      this.$notify({
        title: '成功',
        message: '这是一条成功的提示消息',
        type: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col {
  margin-bottom: 20px;
}
.searchBox {
  display: flex;
  .inputSearch {
    margin-left: 20px;
    width: 300px;
  }
}
.dashboard {
  &-container {
    margin: 30px;
    .detailHearder {
      display: flex;
      align-items: center;
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.state {
  display: flex;
  align-items: center;
  img {
    width: 100px;
    height: 100px;
    margin-right: 40px;
  }
}
</style>
